<template>
  <card class="insure-card" :headerStyle="{ paddingTop: '4px' }" title="违章记录" :showDivider="false">
    <table-index class="insure-card-table" :table="table" @loadData="loadData">
      <template #violantionCode="{ record }">
        <div>{{ record.violantionCode }}</div>
        <tag type="primary" v-for="(item, index) in record.violationLabelList" :key="index">
          {{ item }}
        </tag>
        <tag type="primary" v-if="record.cooperateHandleState">{{ record.cooperateHandleStateName }}</tag>
      </template>
      <template #orderCodeLike="{ record }">
        <template v-if="!record.orderCode && !record.giveStaffName">-</template>
        <template v-else>
          <template v-if="record.orderCode">
            <a-link type="link" @click="() => onLink(record)" style="color: rgba(24, 144, 255, 1); text-decoration: underline">
              {{ record.orderCode }}
            </a-link>
          </template>
          <template v-else>-</template>
          <div>交车人：{{ record.giveStaffName || '-' }}</div>
          <div>违章押金收取方式：{{ record.violationChargeTypeName || '-' }}</div>
        </template>
      </template>
      <template #memberName="{ record }">
        <div v-if="record.memberName">
          <div>{{ record.memberName }} {{ record.memberPhone }}</div>
        </div>
        <div v-else>-</div>
      </template>
      <template #violationFeeStateName="{ record }">
        <span v-if="(record.handleType == 2 || record.handleType === 3) && record.violationFeeState == 1">无需收款</span>
        <span v-else-if="record.violationFeeState == 2">未收款</span>
        <div v-else-if="record.violationFeeState == 3">已收款</div>
      </template>
      <template #urgePayStatus="{ record }">
        <p>{{ record.urgePayStatusName || '已催缴' }}</p>
        <a v-if="record.urgePayStatus == 1" @click="viewCallRecord(record)" class="view_record-style">催缴记录</a>
      </template>
    </table-index>
  </card>
  <!-- 催缴记录 -->
  <callRecord ref="call_record" />
</template>
<script setup lang="ts">
  import callRecord from '../../../../operation/car-violation/call/callRecord.vue'

  import { ref, reactive, onMounted } from 'vue'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { getList } from '@/api/asset/carViolation'
  import useNavigate from '@/hooks/useNavigate'
  const { navigateTo } = useNavigate()

  const props = defineProps<{
    carId: string
  }>()

  const queryParam = reactive({
    carId: props.carId,
  })
  const table = useTable({
    queryParam,
    columns: [
      { title: '违章单关联门店', dataIndex: 'siteName', fixed: 'left', width: 150 },
      { title: '违章单号', dataIndex: 'violantionCode', slotName: 'violantionCode', width: 150 },
      { title: '车牌号', dataIndex: 'licenseNo', width: 100 },
      { title: '车辆当前归属门店', dataIndex: 'carSiteName', width: 140 },
      {
        title: '违章时间',
        dataIndex: 'eventTime',
        sortable: { sortDirections: ['ascend', 'descend'] },
        width: 170,
      },
      { title: '违章发生方', dataIndex: 'violationPartyName', width: 100 },
      { title: '关联单号', dataIndex: 'orderId', slotName: 'orderCodeLike', width: 240 },
      { title: '承租人信息', dataIndex: 'memberName', slotName: 'memberName', width: 150 },
      { title: '违章城市', dataIndex: 'eventCityName', width: 100 },
      { title: '罚分', dataIndex: 'eventScore', width: 80 },
      { title: '罚款', dataIndex: 'eventAmount', unit: '元', width: 100 },
      { title: '处理方', dataIndex: 'handleTypeName', width: 100 },
      { title: '代办费用(元)', dataIndex: 'handleAmount', width: 120 },
      { title: '违章代办真实成本', dataIndex: 'handleRealCost', unit: '元', width: 150 },
      { title: '违章状态', dataIndex: 'eventStatusStr', width: 100 },
      { title: '费用状态', dataIndex: 'violationFeeStateName', slotName: 'violationFeeStateName', width: 100 },
      { title: '催缴状态', dataIndex: 'urgePayStatusName', slotName: 'urgePayStatus', width: 100 },
      { title: '负责人', dataIndex: 'staffName', fixed: 'right', width: 100 },
    ],
  })

  // 查看催缴记录
  const call_record = ref()
  const viewCallRecord = (record: any) => {
    console.log(record)
    call_record.value.show(record.id)
  }

  const onLink = (record: any) => {
    navigateTo(`/short-order/detail/${record.orderId}`, `${record.orderCode}-短租详情`)
  }

  const loadData = useFetchTableDataApi(table, queryParam, getList)

  onMounted(() => {
    loadData()
  })
</script>
<style scoped lang="less">
  .view_record-style {
    white-space: nowrap;
    cursor: pointer;
    color: rgb(24, 144, 255);
  }
</style>
